"use client"

import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { BookOpen, Clock, Star, Share2, Bookmark } from "lucide-react"
import { useState } from "react"

interface WisdomDetailModalProps {
  wisdom: any
  onClose: () => void
}

export function WisdomDetailModal({ wisdom, onClose }: WisdomDetailModalProps) {
  const [isBookmarked, setIsBookmarked] = useState(false)

  const handleBookmark = () => {
    setIsBookmarked(!isBookmarked)
  }

  const handleShare = () => {
    // 分享功能
    navigator.clipboard.writeText(`${wisdom.title} - 商界智库`)
  }

  return (
    <Dialog open={true} onOpenChange={onClose}>
      <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <div className="flex items-start justify-between">
            <div className="flex-1">
              <DialogTitle className="text-xl font-semibold text-slate-900 mb-3">{wisdom.title}</DialogTitle>
              <div className="flex items-center space-x-3 mb-4">
                {wisdom.priority && (
                  <Badge
                    variant={
                      wisdom.priority === "high"
                        ? "destructive"
                        : wisdom.priority === "medium"
                          ? "default"
                          : "secondary"
                    }
                  >
                    {wisdom.priority === "high" ? "重要" : wisdom.priority === "medium" ? "关注" : "一般"}
                  </Badge>
                )}
                {wisdom.readTime && (
                  <div className="flex items-center space-x-1 text-sm text-slate-600">
                    <Clock className="w-4 h-4" />
                    <span>{wisdom.readTime}</span>
                  </div>
                )}
                <span className="text-sm text-slate-500">{wisdom.time}</span>
              </div>
            </div>
            <div className="flex items-center space-x-2">
              <Button variant="ghost" size="sm" onClick={handleBookmark}>
                <Bookmark className={`w-4 h-4 ${isBookmarked ? "fill-current text-yellow-600" : ""}`} />
              </Button>
              <Button variant="ghost" size="sm" onClick={handleShare}>
                <Share2 className="w-4 h-4" />
              </Button>
            </div>
          </div>
        </DialogHeader>

        <Separator className="my-4" />

        <div className="prose prose-slate max-w-none">
          <div className="text-slate-700 leading-relaxed whitespace-pre-line">{wisdom.fullContent}</div>
        </div>

        {wisdom.tags && (
          <div className="mt-6">
            <Separator className="mb-4" />
            <div className="flex items-center space-x-2">
              <span className="text-sm font-medium text-slate-600">相关标签：</span>
              <div className="flex flex-wrap gap-2">
                {wisdom.tags.map((tag, index) => (
                  <Badge key={index} variant="outline" className="text-xs">
                    {tag}
                  </Badge>
                ))}
              </div>
            </div>
          </div>
        )}

        <div className="mt-6 flex items-center justify-between">
          <div className="flex items-center space-x-4">
            <Button variant="outline" size="sm">
              <BookOpen className="w-4 h-4 mr-2" />
              相关阅读
            </Button>
            <Button variant="outline" size="sm">
              <Star className="w-4 h-4 mr-2" />
              评价内容
            </Button>
          </div>
          <Button onClick={onClose}>关闭</Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}
